<template>
    <div class="ExpertInfo">
        <div
            class="ExpertInfo-top"
            style="display: flex; justify-content: space-between"
        >
            <el-input
                style="margin-right: 10px"
                v-model="queryCondition.username"
            >
                <template slot="prepend"> 姓名 </template>
            </el-input>
            <el-input style="margin-right: 10px" v-model="queryCondition.phone">
                <template slot="prepend"> 电话 </template>
            </el-input>
            <div
                class="el-input el-input-group el-input-group--prepend"
                style="margin-right: 10px"
            >
                <div class="el-input-group__prepend">职称</div>
                <el-select
                    v-model="queryCondition.level"
                    style="width: calc(100%)"
                    clearable
                >
                    <el-option
                        v-for="item in [
                            { value: 0, label: '低级工程师' },
                            { value: 1, label: '中级工程师' },
                            { value: 2, label: '高级工程师' },
                        ]"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div>
            <el-button
                type="primary"
                @click="setExpertList"
                class="el-icon-search"
            />
        </div>

        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column type="index" width="50"> </el-table-column>
            <el-table-column
                prop="username"
                label="姓名"
                width="180"
            ></el-table-column>
            <el-table-column prop="sex" label="性别">
                <template slot-scope="scope">
                    {{ scope.row.sex === 0 ? "女" : "男" }}
                </template>
            </el-table-column>
            <el-table-column prop="age" label="年龄"> </el-table-column>
            <el-table-column prop="image" label="照片">
                <template slot-scope="scope">
                    <img
                        :src="getuserAvatar(scope.row.username)"
                        alt=""
                        style="height: 50px"
                    />
                </template>
            </el-table-column>
            <el-table-column prop="phone" label="电话"> </el-table-column>
            <el-table-column prop="level" label="职称">
                <template slot-scope="scope">
                    {{
                        scope.row.level === 0
                            ? "低级"
                            : scope.row.level === 1
                            ? "中级"
                            : "高级"
                    }}工程师
                </template>
            </el-table-column>

            <el-table-column label="详细信息">
                <template slot-scope="scope">
                    <el-link
                        type="primary"
                        @click="handleDetailInfo(scope.row.des)"
                        >详情</el-link
                    >
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="详细信息" :visible.sync="dialogVisible" width="30%">
            <el-input type="textarea" rows="20" :value="detailInfo"> </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
        <div style="width: 100%; display: flex; justify-content: flex-end">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryCondition.pageNo"
                :page-sizes="[5, 10, 20, 50, 100]"
                :page-size="queryCondition.pageSize"
                layout="total, sizes, prev, pager, next"
                :total="totalCount"
                style="margin-top: 20px"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { getImageFile, getUserAvatar } from "@/utils";
import {
    regularAge,
    regularLevel,
    regularPassword,
    regularSex,
    regularTel,
} from "@/rules";
import { createExpert, listUsers } from "@/api";

export default {
    name: "ExpertInfo",
    data() {
        return {
            dialogVisible: false,
            addDialog: false,
            form: {
                username: "",
                password: "",
                sex: "",
                age: "",
                avatar: "",
                phone: "",
                level: "",
                des: "",
            },
            isCreate: false,

            tableData: [],
            totalCount: 0,

            queryCondition: {
                pageNo: 1,
                pageSize: 10,
                type: 1,
                level: null,
                username: "",
                phone: "",
            },

            avatarKey: 0,

            detailInfo: "",
        };
    },

    mounted() {
        this.setExpertList();
    },
    methods: {
        handleDetailInfo(info) {
            this.dialogVisible = true;
            this.detailInfo = info;
        },
        handleDelete(row) {
            let { id } = row;
            this.tableData = this.tableData.filter((item) => {
                let rowId = item.id;
                return rowId !== id;
            });
        },

        handleChangeAvatar(e) {
            var reader = new FileReader();
            reader.readAsDataURL(e.raw);
            reader.onload = (e) => {
                this.form.avatar = e.target.result;
            };
        },

        handleCommand(command) {
            if (command === 0) {
                this.form.level = "初级工程师";
            } else if (command === 1) {
                this.form.level = "中级工程师";
            } else if (command === 2) {
                this.form.level = "高级工程师";
            }
        },
        handleSex(sex) {
            if (sex === 0) {
                this.form.sex = "女";
            } else {
                this.form.sex = "男";
            }
        },
        getuserAvatar(username) {
            return getUserAvatar(username);
        },
        handleSizeChange(newSize) {
            this.queryCondition.pageSize = newSize;
            this.setExpertList();
        },
        handleCurrentChange(newPageNo) {
            this.queryCondition.pageNo = newPageNo;
            this.setExpertList();
        },
        async openDialog(isCreate, data) {
            this.isCreate = isCreate;
            if (isCreate) {
                this.form = {
                    username: "",
                    password: "",
                    sex: "",
                    age: "",
                    avatar: "",
                    phone: "",
                    level: "",
                    des: "",
                };
            } else {
                this.form = JSON.parse(JSON.stringify(data));
                await getImageFile(
                    "proxy/img_of_avatar/" +
                        data.username +
                        ".png?timestamp=" +
                        Date.now()
                ).then((file) => {
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = (e) => {
                        this.form.avatar = e.target.result;
                        this.avatarKey++;
                    };
                });
                this.form.level =
                    this.form.level === 0
                        ? "低级工程师"
                        : this.form.level === 1
                        ? "中级工程师"
                        : "高级工程师";
                this.form.sex = this.form.sex === 0 ? "女" : "男";
            }
            this.addDialog = true;
        },

        async handleOperateExpert() {
            let { username, password, age, phone, sex, level, des } = this.form;
            level = level === "初级工程师" ? 0 : level === "中级工程师" ? 1 : 2;
            sex = sex === "男" ? 1 : 0;
            const validationRule = {
                password: () => regularPassword.test(password),
                age: () => regularAge.test(age),
                phone: () => regularTel.test(phone),
                sex: () => regularSex.test(sex),
                level: () => regularLevel.test(level),
            };
            const infoMap = {
                username: "用户名",
                password: "密码",
                age: "年龄",
                phone: "电话号码",
                sex: "性别",
                level: "职称",
            };
            for (let key in validationRule) {
                if (!validationRule[key]()) {
                    this.$message.error(`${infoMap[key]}格式错误，请重试`);
                    return;
                }
            }
            this.addDialog = false;
            let userinfo = { username, password, age, phone, sex, level, des };
            const res = await createExpert(
                this.isCreate ? "/user/registry" : "/user/modify",
                {
                    ...userinfo,
                    type: 1,
                    avatar: this.form.avatar,
                }
            );
            await this.setExpertList();
        },
        async setExpertList() {
            const res = await listUsers("/user/list", this.queryCondition);
            if (res.data.code === 0) {
                this.tableData = res.data.data.records;
                this.totalCount = res.data.data.total;
            } else {
                this.$message.error(res.data.msg);
            }
        },
    },
};
</script>

<style lang='less'>
.ExpertInfo {
    &-top {
        display: flex;
        justify-content: space-between;
        //float: right;
    }

    .el-input-group--append .el-select .el-input.is-focus .el-input__inner,
    .el-input-group--prepend .el-select .el-input.is-focus .el-input__inner {
        border-color: #409eff;
    }
}
</style>
